<template>
	<view class="container">
		<view class="search">
			<text class="iconfont">&#xe686;</text>
			<input class="input" v-model="value" type="text" placeholder="请输入要搜索的内容" focus="true" confirm-type="搜索" @confirm="goList(value)" confirm-hold>
			<view class="confirm" @click="goList(value)">搜索</view>
		</view>
		<view class="history" v-if="keyword_key && keyword_key.length > 0">
			<view class="title">历史搜索<text @click="clearHistory" class="iconfont icon-del">&#xe694;</text></view>
			<view class="list">
				<view class="item" v-for="(item,index) in keyword_key" :key="index" @click="goList(item)">{{item}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword_key: [],
				value:'',
				path:'', // 搜索列表路径
			};
		},
		onShow(){
			this.value=''
		},
		onLoad(options){
			this.path = options.path;
			// 设置历史搜索
			let keywordHistory = uni.getStorageSync('line_keyowrd_history');
			this.keyword_key = keywordHistory ? keywordHistory : [];
		},
		methods:{
			//清空历史
			clearHistory()
			{
				uni.showModal({
					title: '',
					content: '确定清空历史搜索？',
					showCancel: true,
					confirmColor: '#333333',
					success: res => {
						if (res.confirm) {
							// 提交删除
							uni.setStorageSync('line_keyowrd_history',[]);
							this.keyword_key = [];
						}
					}
				});
			},
			// 前往列表
			goList(value){
				value = value.trim();
				if(value)
				{
					let keywordHistory = this.keyword_key;
					let index = keywordHistory.findIndex(v=> v===value);
					if(index !== -1){
						keywordHistory.splice(index,1)
					}
					keywordHistory.unshift(value)
					//搜索承储到缓存当中
					uni.setStorageSync('line_keyowrd_history',keywordHistory)
				}
				
				// 设置上一页关键词
				let pages, prevPage;
				pages = getCurrentPages();
				prevPage = pages[pages.length - 2]
				if (prevPage.$vm.pageName && prevPage.$vm.pageName == 'list') {
					prevPage.$vm.keyword = value;
					prevPage.$vm.reload = true;
					uni.navigateBack({
						delta: 1
					}); 
				}
				else
				{
					uni.navigateTo({
						url:`${this.path}?keyword=${value}`
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $uni-bg-color;
	}
	.search{
		display: flex;
		align-items: center;
		justify-content:space-between;
		position: relative;
		padding: 20rpx 30rpx;
		margin-bottom: 23rpx;
		background: #fff;
		&,& *{
			box-sizing: border-box;
		}
		.iconfont {
			position: absolute;
			left: 45rpx;
			color: #cbcbcb;
		}
		.input{
			flex: 1;
			width: 600rpx;
			height: 64rpx;
			padding: 0 15rpx 0 66rpx;
			color: #333;
			font-size: $uni-font-size-sm;
			background-color: #f6f6f8;
			border-radius: 32rpx;
		}
		.input-placeholder{
			color: $uni-text-color-placeholder;
		}
		.confirm{
			margin-right: 20rpx;
			line-height: 64rpx;
			font-size: 26rpx;
			padding-left: 20rpx;
			color: $uni-color-primary;
		}
	}
	.history{
		padding: 0 45rpx;
		.title{
			margin-bottom: 30rpx;
			font-size: $uni-font-size-base;
			font-weight: bold;
			color: #000;
			.icon-del{
				float: right;
				color: #c4c4c4;
				font-weight: normal;
				padding-left: 20rpx;
			}
		}
		.list{
			overflow: hidden;
			height: 160rpx;
		}
		.item{
			float: left;
			padding: 15rpx 20rpx;
			margin: 0 10rpx 20rpx;
			background-color: #eee;
			border-radius: 5rpx;
			font-size: 30rpx;
		}
	}
</style>
